import { Card, Form, Input, Button, Space, Table, message, Popconfirm } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { ColumnsType } from 'antd/lib/table';
import { reqDeleteHospitalSet, reqDeleteHospitalSetBatch, reqGetHospitalSet } from '@/api/hopaital/hospitalSet';
import { FormFields, HospitalSetItem } from '@/api/hopaital/hospitalSet/types';
import { Link, useNavigate } from 'react-router-dom';



export default function HospitalSet() {

  const onFinish = (values: FormFields) => {
    // 获取表单的值
    setFormValues(values)

  };
  let onFinishFailed = () => { };
  // 编写删除
  let remove = (id: React.Key) => {
    return async () => {
      await reqDeleteHospitalSet(id);
      message.success('删除成功');
      setFresh({})
    }
  }
  let batchRemove = async () => {
    await reqDeleteHospitalSetBatch(selectedKeys as string[]);
    message.success('批量删除成功');
    setFresh({});
  }

  const columns: ColumnsType<HospitalSetItem> = [
    {
      title: '序号',
      render: (_, record, index) => {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode'
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl'
    },
    {
      title: '签名',
      dataIndex: 'signKey'
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName'
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone'
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      render: (_, record) => {
        return (
          <Space>
            <Link to={`/syt/hospital/hospitalSet/edit/${record.id}`}><Button type='primary' icon={<EditOutlined />}></Button></Link>
            <Popconfirm title='确定删除吗?' onConfirm={remove(record.id)} okText='是' cancelText='否'>
              <Button type='primary' danger icon={<DeleteOutlined />} ></Button>
            </Popconfirm>
          </Space>
        )
      }
    },
  ]
  // 设置相关状态数据
  let [page, setPage] = useState<number>(1) // 设置当前的页面
  let [pageSize, setPageSize] = useState<number>(3) // 每页数据3条
  let [total, setTotal] = useState<number>(10)
  let [hospital, setHospital] = useState<HospitalSetItem[]>([]);// 医院设置列表数据
  let [isLoading, setIsLoading] = useState(false)
  let [formValues, setFormValues] = useState<FormFields>({ hosname: '', hoscode: '' })
  let [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
  let [form] = Form.useForm();
  let [fresh, setFresh] = useState({});
  let navigate = useNavigate();
  // 组件挂载
  useEffect(() => {
    // 声明一个异步函数
    let getData = async () => {
      setIsLoading(true)
      let result = await reqGetHospitalSet({
        page,
        limit: pageSize,
        hoscode: formValues.hoscode,
        hosname: formValues.hosname
      })
      setHospital(result.records);
      setTotal(result.total);
      setIsLoading(false);
    }
    getData();

    return () => {
    }
  }, [page, pageSize, formValues, fresh])
  let reset = () => {
    form.setFieldsValue({ hosname: '', hoscode: '' });
    setFormValues({ hosname: '', hoscode: '' })
    setPage(1)
  }
  return (
    <Card>
      <Form
        form={form}
        name="basic"
        layout='inline'
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item name='hosname'>
          <Input placeholder='医院名称' />
        </Form.Item>
        <Form.Item name='hoscode'>
          <Input placeholder='医院编号' />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
            <Button onClick={reset}>
              清空
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <Space className='mt'>
        <Button type='primary' onClick={() => navigate('/syt/hospital/hospitalSet/add')}>添加</Button>
        <Button onClick={batchRemove} danger type='primary' disabled={selectedKeys.length === 0}>批量删除</Button>
      </Space>
      <Table
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys: React.Key[], selectedRows: HospitalSetItem[]) => {
            setSelectedKeys(selectedRowKeys)
          }
        }}
        loading={isLoading}
        className='mt'
        columns={columns}
        dataSource={hospital}
        rowKey={'id'}
        scroll={{ x: 2000 }}
        pagination={{
          total: total,
          pageSize: pageSize,
          current: page,
          showSizeChanger: true,
          pageSizeOptions: [3, 5, 8, 20],
          showQuickJumper: true,
          showTotal: total => {
            return `总计:${total}条`;
          },
          onChange: (page: number, pageSize: number) => {
            setPage(page)
            setPageSize(pageSize)
          }
        }}
      />
    </Card>
  )
}
